<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
<jsp:include page="/WEB-INF/jsp/inc/include-easyUI.jsp"></jsp:include>
    <!-- 弹出框 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/sweetalert/dist/sweetalert.css">
<script src="${pageContext.request.contextPath}/static/plugins/sweetalert/dist/sweetalert.min.js"></script>

<!-- 表单验证 -->
<!--     <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/vendor/bootstrap/css/bootstrap.css"/> -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/dist/css/bootstrapValidator.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/dist/js/bootstrapValidator.js"></script>

<script src="${pageContext.request.contextPath}/static/assets/js/bootstrap.min.js"></script>

<!-- 时间选择器 -->
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/jeDate/jedate/skin/jedate.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/jeDate/jedate/jedate.js"></script>

<!-- Core CSS file -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/photoswipe/dist/photoswipe.css"> 
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/photoswipe/dist/default-skin/default-skin.css"> 
<script src="${pageContext.request.contextPath}/static/plugins/photoswipe/dist/photoswipe.min.js"></script> 
<script src="${pageContext.request.contextPath}/static/plugins/photoswipe/dist/photoswipe-ui-default.min.js"></script> 

<style type="text/css">
.btn {
	height: inherit;
	border: 0;
}
.sa-button-container .btn{
 	margin: auto 15px; 
}
</style>
<script type="text/javascript">

</script>
</head>
<body>
	<div class="main-content">
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
 				try { 
 					ace.settings.check('breadcrumbs', 'fixed') 
 				} catch (e) { 
 				} 
			</script> 
			<ul class="breadcrumb">
				<li class="active">日常消费管理</li>
			</ul>
		</div>
		<div class="page-content">
			<div>
				<div class="col-xs-12 col-sm-12">
					<!-- 搜索form -->
					<form id="searchUserForm" action="" class="form-horizontal" role="form" >
						<div class="space-4"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label no-padding-right" for="search-countDatetime"> 时间 </label>
							<div class="col-sm-9">
								<input type="text" id="search-countDatetime" name="countDatetime" 
									placeholder="时间" class="col-xs-10 col-sm-5" readonly="true"/>
								<div id="getBeginTime"></div>
								
								<div>
			                        <button type="button" id="btn-search" class="btn btn-primary start" style="margin-left: 100px;">
					                    <i></i>
					                    <span>搜索</span>
					                </button>
					                <button type="reset" class="btn btn-warning cancel" style="margin-left: 20px;">
					                    <i></i>
					                    <span>取消</span>
					                </button>
	                           </div>
							</div>
							
						</div>
						<div class="space-4"></div>
					</form>
					
				</div><!-- /.col -->
			</div><!-- /.row -->
			
			<div id="content" region="center" title="日常消费信息" style="overflow: hidden">
			</div>
			<table id="userList" border="false" width="100%" height="450px">
			</table>
			
			<!-- 编辑 -->
			<div class="modal fade" id="editConsumeModal" tabindex="-1" role="dialog" aria-labelledby="editConsumeModalLabel">
				<div class="modal-dialog" role="document" style="margin:150px 450px">
					<div class="modal-content">
						<form id="editConsumeInfoForm" class="form-horizontal" role="form" style="margin: 0px;">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_editConsumeInfo">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title" id="editConsumeModalLabel">日常消费信息</h4>
							</div>
							<div class="modal-body">
							<input type="hidden" name="consumeType" value="EVERY_CONSUME"/>
								<input type="hidden" name="id" id="edit-user-id"/>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="edit-consume-consumeItemId"> 消费项目：</label>
									<div class="col-sm-8">
										<input type="text" name="consumeItemId" id="edit-consume-consumeItemId" placeholder="消费项目" class="form-control" />
									</div>
								</div>
								<div class="space-4"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="edit-consume-consumeMoney"> 消费金额：</label>
									<div class="col-sm-8">
										<input type="text" name="consumeMoney" id="edit-consume-consumeMoney" placeholder="消费金额" class="form-control" />
									</div>
								</div>
								<div class="space-4"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="edit-consume-picture"> 票据图片：</label>
									<div class="col-sm-8">
										<input type="text" name="picture" id="edit-consume-picture" placeholder="票据图片" class="form-control" />
									</div>
								</div>
							</div>
							<div class="modal-footer">
								<div class="col-lg-6 col-lg-offset-5">
									<button type="button" class="btn btn-default" id="reset_editConsumeInfo" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" id="submit_editConsumeInfo">确定</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!-- begin 展现图片 -->
			<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
				<div class="pswp__bg"></div>
				<div class="pswp__scroll-wrap">
					<div class="pswp__container">
						<div class="pswp__item"></div>
						<div class="pswp__item"></div>
						<div class="pswp__item"></div>
					</div>
					<div class="pswp__ui pswp__ui--hidden">
						<div class="pswp__top-bar">
							<div class="pswp__counter"></div>
							<button class="pswp__button pswp__button--close"
								title="Close (Esc)"></button>
							<button class="pswp__button pswp__button--fs"
								title="Toggle fullscreen"></button>
							<button class="pswp__button pswp__button--zoom"
								title="Zoom in/out"></button>
							<div class="pswp__preloader">
								<div class="pswp__preloader__icn">
									<div class="pswp__preloader__cut">
										<div class="pswp__preloader__donut"></div>
									</div>
								</div>
							</div>
						</div>
						<div
							class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
							<div class="pswp__share-tooltip"></div>
						</div>
						<button class="pswp__button pswp__button--arrow--left"
							title="Previous (arrow left)"></button>
						<button class="pswp__button pswp__button--arrow--right"
							title="Next (arrow right)"></button>
						<div class="pswp__caption">
							<div class="pswp__caption__center"></div>
						</div>
					</div>
				</div>
			</div>
			<!-- end 展现图片 -->
			
			<!-- /.page-header -->
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<!-- PAGE CONTENT ENDS -->
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content -->
	</div><!-- /.main-content -->
	
<script type="text/javascript">
jeDate({
	dateCell:"#search-countDatetime",//直接显示日期层的容器，可以是ID  CLASS
	format:"YYYY-MM",//日期格式
	isinitVal:false, //是否初始化时间
	festival:false, //是否显示节日
	isTime:true, //是否开启时间选择
	minDate:"2017-06-01 00:00:00",//最小日期
	maxDate:jeDate.now(0), //设定最大日期为当前日期
});
		var consumeDataGrid;
        $(function () {
            consumeDataGrid = $("#userList").datagrid({
                url: '${pageContext.request.contextPath}/admin/consumeRecord/getList',
                rownumbers: true,
                fitColumns:true,
                idField: 'id',
                pageSize: 10,
                pagination: true,
                pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
                onLoadError:function(data){
                	$.messager.alert("消费信息", "暂无消费数据信息", "error");
                
                },
                frozenColumns: [[{
                    title: 'id',
                    field: 'id',
                    width: 50,
                    //checkbox: true
                }]],
                columns: [[ {
                    field: 'consumeItemName',
                    title: '消费项目',
                    align:'center',
                    width: 80,
                }, {
                    field: 'consumeMoney',
                    title: '消费金额',
                    align:'center',
                    width: 50,
                }, {
                    field: 'pagerUserName',
                    title: '付款人',
                    align:'center',
                    width: 80
                }, {
                    field: 'consumeUserNames',
                    title: '消费人',
                    align:'left',
                    width: 120
                }, {
                    field: 'description',
                    title: '描述',
                    align:'left',
                    width: 150
                }, {
                    field: 'createDate',
                    title: '创建时间',
                    align:'center',
                    width: 80
                }, {
				    field: "toImages",
				    title: "账单图片",
				    align:'center',
				    width: 50,
				    formatter: function (value, row, index) {
						return "<a style='color:#0909df' href=\"javascript:toImages("+index+");\" title='打开图片'>打开图片</a>";
					}
				},
                ]],
                toolbar: [
                {
                    text: '创建',
                    iconCls: 'icon-add',
                    handler: function () {
                    	createConsume();
                    }
                }, '-', {
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        deleteConsume();
                    }
                }, '-', {
                    text: '编辑',
                    iconCls: 'icon-edit',
                    handler: function () {
                        editConsume();
                    }
                }, '-', {
                    text: '取消选中',
                    iconCls: 'icon-undo',
                    handler: function () {
                        consumeDataGrid.datagrid('unselectAll');
                    }
                }]
            });
        });
        function toImages(index){
        	consumeDataGrid.datagrid('clearChecked');
        	consumeDataGrid.datagrid('selectRow',index);
        	var row = consumeDataGrid.datagrid('getSelected');
        	console.log(row);
        	var images = row.images;
			if(images){
				var pswpElement = document.querySelectorAll('.pswp')[0];
			    // build items array
			    var items = [
			        {
			            src: images[0].relativePath,
			            w: 964,
			            h: 1024
			        }
			    ];
			    
			    // define options (if needed)
			    var options = {
			             // history & focus options are disabled on CodePen        
			        history: false,
			        focus: false,

			        showAnimationDuration: 0,
			        hideAnimationDuration: 0
			        
			    };
			    
			    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
			    gallery.init();
			}
        }
        
        function reloadDataGrid() {
            consumeDataGrid.datagrid('clearChecked');
            consumeDataGrid.datagrid('reload');
        }
        
        //快速搜索按钮
		$('#btn-search').click(function(){
			consumeDataGrid.datagrid('unselectAll');
           	var countDatetime = $('#search-countDatetime').val();
           	consumeDataGrid.datagrid('load', {
				countDatetime : countDatetime,
			});
		});
      
		//删除消费
		function deleteConsume() {
			var ids = [];
			var rows = consumeDataGrid.datagrid('getSelections');
			if (rows.length > 0) {
				swal({
					title : "你是否确定删除？",
					text : '',
					type : "warning",
					showCancelButton : true,
					confirmButtonColor : "#DD6B55",
					confirmButtonText : "删除",
					cancelButtonText : "取消",
					closeOnConfirm : false,
// 					closeOnCancel : false
				},
				function(isConfirm) {
					if (isConfirm) {
						var authFlag = true;
						var userName = '${activeUser.userName}';
						for ( var i = 0; i < rows.length; i++) {
							ids.push(rows[i].id);
							if(rows[i].pagerUserName != userName){
								authFlag = false;
								break;
							}
						}
						if(authFlag){
							$.ajax({
								method : 'post',
								url : '${pageContext.request.contextPath}/admin/consumeRecord/delete',
								data : {
									ids : ids.join(',')
								},
								cache : false,
								dataType : "json",
								success : function(data) {
									if (data.success) {
										swal("删除成功","","success");
										reloadDataGrid();
									} else {
										swal("删除失败", data.obj,"error");
									}
								}
							});
						}else{
							swal("删除失败", '无权限删除别人的',"error");
						}
					} 
				});
			} else {
				top.showMsg("提示", "请选择要删除的消费！");
			}
		}
		
		function createConsume(){
        	window.location.href='${pageContext.request.contextPath}/admin/consumeRecord/toCreateEveryConsume/index';
		}

		function editConsume() {
			var rows = consumeDataGrid.datagrid('getSelections');
			if (rows.length > 0) {
				if (rows.length == 1) {
					var userName = '${activeUser.userName}';
					if(rows[0].pagerUserName == userName){
						window.location.href='${pageContext.request.contextPath}/admin/consumeRecord/toEditEveryConsume/index?id='+rows[0].id;						
					}else{
						swal("编辑失败", '无权限编辑别人的',"error");
					}
				} else {
					top.showMsg("提示", '只能选择一个消费进行编辑！');
				}
			} else {
				top.showMsg("提示", "请选择要编辑的消费！");
			}
		}
		
	</script>	
  </body>
</html>
